<template>
  <div class="page page-login">
    <div class="login-main relative w-430 rd-5 bg-transparent bc1-dedede">
      <div class="headerimg-wrapper">
        <Icon icon="carbon:user-avatar-filled-alt" class="header-img" />
      </div>

      <div>
        <NForm
          ref="formRef"
          size="large"
          :show-label="false"
          :rules="formRules"
          :model="formData"
          :disabled="loging"
        >
          <n-form-item path="username">
            <n-input v-model:value="formData.username" placeholder="输入用户名">
              <template #prefix>
                <Icon icon="bxs:user" class="c-gray" />
              </template>
            </n-input>
          </n-form-item>
          <n-form-item class="mt-10" path="password">
            <n-input v-model:value="formData.password" placeholder="输入密码">
              <template #prefix>
                <Icon icon="mdi:password" class="c-gray" />
              </template>
            </n-input>
          </n-form-item>
          <NFormItem class="mt-10">
            <n-button
              type="primary"
              block
              :loading="loading"
              @click="handleLogin"
              >登录</n-button
            >
          </NFormItem>
        </NForm>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { Icon } from '@iconify/vue';
import { NForm, NFormItem, NButton } from 'naive-ui';
import { Message } from 'phui-v';

const formRef = ref(null);
// 表单数据
const formData = reactive({
  username: '',
  password: '',
});
// 表单验证规则
const formRules = {
  username: {
    required: true,
    message: '请输入用户名',
    trigger: ['blur', 'input'],
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: ['blur', 'input'],
  },
};
/** 登录中 */
const loading = ref(false);

/** 登录 */
function handleLogin() {
  if (formRef.value != null) {
    formRef.value.validate((errors) => {
      if (!errors) {
        Message.success('Valid');
        loading.value = true;
        setTimeout(() => {
          loading.value = false;
        }, 5000);
      } else {
        Message.error({ message: 'Please fill in the form' });
      }
    });
  }
}
</script>

<style lang="less">
.page-login {
  background-image: url(../../assets/images/login_bg.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-main {
    padding: 100px 40px 40px;
  }

  .headerimg-wrapper {
    display: block;
    position: absolute;
    top: -50px;
    left: calc(50% - 50px);
    z-index: 2;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background-color: white;
    padding: 2px;
  }

  .header-img {
    width: 100%;
    height: 100%;
    color: var(--primary-color);
  }
}
</style>
